<template>
	<view class="container">
		<view class="content-wrap" v-for="houselistData in list" :key="houselistData.id">
			<view class="content" @click="informationBtn(houselistData.houseId)">
				<view class="pic">
					<image :src="houselistData.images?houselistData.images.split(',')[0]:''" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="title">
						<view class="type_detail">
							{{type[houselistData.type]}}
						</view>
						<view class="item_title">{{houselistData.addr}}</view>
					</view>
					<view class="area">
						<text> {{houselistData.region}}</text>
						<text>{{houselistData.sector}}区</text>
					</view>
					<view class="price">
						{{houselistData.rent}}
						<text class="fontSize">元/m<sup>3</sup></text>
					</view>
				</view>
			</view>
			<view class="btn-wrap">
				<image class="btn-image" src="/static/images/收藏.png" @click.stop="handleDelete(houselistData.id)"></image>
			</view>
		</view>
		<view style="width: 100%;
				text-align: center;
				padding: 20px 0;
				color: #999;" v-if="isLoading" class="loading">
			正在加载...
		</view>
		<view style="width: 100%;
				text-align: center;
				padding: 20px 0;
				color: #999;" v-if="!hasMoreData &&!isLoading" class="no-more">
			没有更多数据了
		</view>
		<up-modal :show="delShow" contentTextAlign='center' :showCancelButton='true' @cancel="delShow=false"
			@confirm="handleConfirmDel" title="提示" content='确认取消收藏吗？'></up-modal>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		getCollect,
		delCollect
	} from '../../api/room'
	import {
		useUserStore
	} from '@/stores/index';
	import {
		toast
	} from "@/utils/common.js"
	import {
		onPageScroll
	} from '@dcloudio/uni-app';
	const userStore = useUserStore()
	const list = ref([])
	// 类型 OFFICE=写字楼，NEAR_SUBWAY=临地铁，WHOLE_RENTAL=整租，COTENANCY=合租
	const type = ref({
		OFFICE: '写字楼',
		NEAR_SUBWAY: '临地铁',
		WHOLE_RENTAL: '整租',
		COTENANCY: '合租',
	});
	const pageNum = ref(1)
	const isLoading = ref(false)
	const hasMoreData = ref(true)
	const initData = () => {
		isLoading.value = true
		const pageSize = 10
		getCollect({
			pageNum: pageNum.value,
			pageSize: pageSize,

		}).then(res => {
			console.log(res)
			if (res.code == 200 && res.rows) {
				if (res.rows.length) {
					list.value.push(...res.rows)
				}
				hasMoreData.value = (list.value.length < res.total)
			}
		}).finally(() => {
			isLoading.value = false
		})
	}
	onPageScroll(() => {
		if (hasMoreData.value && !isLoading.value) {
			pageNum.value += 1
			initData()
		}
	})
	onMounted(() => {
		initData()
	})
	const delShow = ref(false)
	const delId = ref()
	const handleDelete = (id) => {
		delId.value = id
		console.log(delId.value, "++++++++")
		delShow.value = true
	}
	const handleConfirmDel = () => {
		delCollect({
			id: delId.value,
			status: "NO"
		}).then(res => {
			if (res.code == 200) {
				toast("取消成功")
                list.value=[]
				initData()
			} else if (res.msg) {
				toast(res.msg)
			}
		}).catch(() => {
			toast('取消失败')
		}).finally(() => {
			delShow.value = false
		})
	}
	const informationBtn = (id) => {
		console.log(id)
		uni.navigateTo({
			url: '/pages/information/information?id=' + id
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20rpx;
	}

	.content-wrap {
		margin-bottom: 24rpx;
		position: relative;

		.btn-wrap {
			display: flex;
			justify-content: flex-end;
			position: absolute;
			right: 4rpx;
			bottom: 26rpx;

			.btn-image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.content {
		display: flex;
		width: 686rpx;
		height: 187rpx;
		box-shadow: 0 0 40 0 rgba(230, 237, 246, 0.5);

		.pic {
			image {
				width: 250rpx;
				height: 187rpx;
				border-radius: 5rpx;
			}
		}

		.info {
			width: 430rpx;
			height: 155rpx;
			padding: 16rpx 18rpx;

			.title {
				display: flex;
				justify-content: flex-start;
				width: 356rpx;
				height: 39rpx;
				gap: 16rpx;
				margin-bottom: 16rpx;

				.type_detail {
					height: 36rpx;
					border-radius: 3rpx;
					padding: 4rpx 10rpx;
					font-size: 20rpx;
					line-height: 33rpx;
					background-color: rgba(250, 169, 63, 1);
				}

				.item_title {
					font-size: 28rpx;
				}
			}

			.area {
				height: 36rpx;
				gap: 8rpx;
				margin-bottom: 16rpx;

				text {
					width: 80rpx;
					height: 36rpx;
					border-radius: 3rpx;
					border: 1rpx solid rgba(187, 187, 187, 1);
					padding: 4rpx 10rpx;
					gap: 107rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(187, 187, 187, 1);
					margin-right: 8rpx;
				}
			}

			.price {
				width: 160rpx;
				height: 39rpx;
				gap: 7rpx;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: rgba(234, 35, 35, 1);

				.fontSize {
					font-size: 22rpx;
				}
			}

			.loading {}

			.no-more {
				width: 100%;
				text-align: center;
				padding: 20px;
				color: #999;
			}
		}
	}
</style>